<template>
  <div class="skills" id="skills">
    <div class="container">
      <h1 class="title">Skills</h1>
      <div class="list-content">
        <ul class="list-content-box">
          <li class="list-content-item">
            <p>WEB DESIGN <span class="list-content-item-number">80%</span></p>
            <p class="list-content-item-progress"></p>
          </li>
          <li class="list-content-item">
            <p>WEB DESIGN <span class="list-content-item-number">80%</span></p>
            <p class="list-content-item-progress"></p>
          </li>
          <li class="list-content-item">
            <p>WEB DESIGN <span class="list-content-item-number">80%</span></p>
            <div class="list-content-item-progress">
              <p class="list-content-item-progress-bar progress-bar-stripes __active"></p>
            </div>
          </li>
        </ul>
        <ul class="list-content-box">
          <li class="list-content-item">
            <p>WEB DESIGN <span class="list-content-item-number">80%</span></p>
            <p class="list-content-item-progress"></p>
          </li>
          <li class="list-content-item">
            <p>WEB DESIGN <span class="list-content-item-number">80%</span></p>
            <p class="list-content-item-progress"></p>
          </li>
          <li class="list-content-item">
            <p>WEB DESIGN <span class="list-content-item-number">80%</span></p>
            <p class="list-content-item-progress"></p>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

<style>
  .skills {
    background: #000;
  }
  .list-content-box {
    float: left;
    width: 50%;
    padding-right: 2em;
  }
  .list-content-box:last-child {
    padding: 0;
  }
  .list-content-item {
    margin-bottom: 2em;
    font-family: var(--fontStyle);
  }
  .list-content-item-number {
    float: right;
  }
  .list-content-item-progress {
    height: 10px;
    margin-top: .5em;
    border-radius: 25px;
    background: #2f2a0a;
  }
  .list-content-item-progress-bar {
    width: 80%;
    height: 100%;
    border-radius: 25px;
    background-color: #766E04;
  }
  .progress-bar-stripes {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, .15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, .15) 50%,
      rgba(255, 255, 255, .15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 40px 40px;
  }
  .list-content-item-progress-bar.__active{
    -webkit-animation: progress-bar-stripes 2s linear infinite;
  }
</style>